<template>

    <div>
    
    <h1>goods</h1>
    
     <el-button type="danger" plain @click="del">批量删除</el-button>
    

     <el-table :data="tableData"
    
    tooltip-effect="dark"
    
     @selection-change="handleSelectionChange"
    
     :row-key="row=>row.goods_id"
    
     >
    
     <!-- type="selection"表示一个勾选框 -->
   <el-table-column
    
     type="selection" width="55"
    
     :reserve-selection="true"
    
     >
    
     </el-table-column>
    
          <el-table-column
    
            prop="add_time"
    
            label="添加时间"
    
            width="120"
    
          ></el-table-column>
    
          <el-table-column prop="goods_id" label="商品id" width="120">
    
            <!-- 使用作用域插槽加上tag标签框 -->
            <template slot-scope="scope">
    
              <el-tag>{{ scope.row.goods_id }}</el-tag>
    
            </template>
    
          </el-table-column>
    
          <!-- show-overflow-tooltip 当数字超出长度 鼠标移上去显示提示框 -->
          <el-table-column
    
            prop="goods_name"
    
            label="商品名称"
    
            show-overflow-tooltip
    
          ></el-table-column>
    
          <el-table-column prop="goods_number" label="商品数量" width="120">
    
          </el-table-column>
    
          <el-table-column prop="goods_price" label="商品价格" width="120">
    
          </el-table-column>
    
        </el-table>
    
      </div>
    
    </template>
    
    <script>
    
    import { menusGet, delDelete } from "@/http/request.js";
    
    export default {
    
      data() {
    
        return {
    
          pagenum: 1,
    
          pagesize: 10,
    
          query: "",
    
          tableData: [],
    
          /* 勾选的数据放在整个数组里面 */
          multipleSelection: [],
    
        };
    
      },
    
      methods: {
    
        /* 勾选的时候触发 里面的形参就是 勾选的数据 会组合成一个数组 */
        handleSelectionChange(val) {
    
          this.multipleSelection = val;
    
        },
    
        /* 批量删除 */
    
        del() {
    
          console.log(delDelete);
    
          this.$confirm('您确定要删除吗？')
          .then(()=>{
    
             this.multipleSelection.forEach((r,i) => {
    
                console.log(r.goods_id)
    
                delDelete(`goods/${r.goods_id}`,{
    
                  id:r.goods_id
    
                }).then((res) => {
    
                  let {meta} = res.data;
    
                  /* 状态200表示请求成功，最后一个循环执行的时候再给提示 */
                  if(meta.status==200&&(i+1)==this.multipleSelection.length){
    
                    this.$message.success(meta.msg)
    
                    /* 删除数据后，重新渲染页面 */
    
                    this.showTable();
    
                  }
    
                });
    
              });
    
          })
    
          /* 点击取消走catch */
    
          .catch(()=>{
    
            this.$message.warning('谢谢你的手下留情')
    
          })
    
    
    
        },
    
        showTable() {
    
          menusGet("goods", {
    
            pagenum: this.pagenum,
    
            pagesize: this.pagesize,
    
            query: this.query,
    
          })
    
            .then((res) => {
    
              console.log(res);
    
              let { meta, data } = res.data;
    
              if (meta.status == 200) {
    
                this.tableData = data.goods;
    
              }
    
            })
    
            .catch((err) => {
    
              console.log(err);
    
            });
    
        },
    
      },
    
      created() {
    
        this.showTable();
    
      },
    
    };
    
   